<template>
  <div>
    <el-table
        stripe
        border
        :data="lists"
        style="width: 100%">
        <el-table-column
          label="订单号"
          prop="id">
        </el-table-column>
        <el-table-column
          label="用户"
          prop="username">
        </el-table-column>
        <el-table-column
          label="商品"
          prop="title">
        </el-table-column>
        <el-table-column
          label="价格"
          prop="price">
        </el-table-column>
        <el-table-column
          label="数量"
          prop="num">
        </el-table-column>
        <el-table-column
          label="图片"
          >
          <template slot-scope="scope">
              <el-image :src="scope.row.img"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="time">
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status">
          <template slot-scope="scope">
           {{ scope.row.status=='COMPLETED'?'已完成':'待支付' }}
          </template>
        </el-table-column>
        <el-table-column
          align="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"  >删除</el-button>
          </template>
        </el-table-column>
    </el-table>
      <div class="page">
        <el-pagination
        layout="prev, pager, next"
        :total="total"
        @prev-click="current_change"
        @next-click="current_change"
        @current-change="current_change">
      </el-pagination>
      </div>
  </div>
</template>
<script>
import { del_order, order_list } from '@/api/order_api';


export default{
  data(){
    return{
      lists:[],
      pageMap:{
        now_page:1,
        limit:10,
        key:""
      },
      total:0,
    }
  },
  methods:{
    current_change(page){
      this.pageMap.now_page = page
      this.order_info()
    },
    handleDelete(index,row){
       this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const {data:res} = await del_order({id:row.id,user_id:row.user_id,good_id:row.good_id})
          this.$message({
            type: res.code==200?'success':'error',
            message: res.msg
          });
          if(res.code==200)this.order_info()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    blob2Base64(blob) {
      return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.addEventListener('load', () => {
              const base64 = reader.result?.toString() || '';
              resolve(base64);
          });
          reader.addEventListener('error', () => {
              reject(new Error('message'));
          });
          reader.readAsDataURL(blob);
      });
  },
  async order_info(){
    const {data:res} = await order_list(this.pageMap)
    this.pageMap.key = ""
    this.lists = res.data.list.map(k=>{
      k.img = this.revert(k.img)
      return k
    })
    this.total = res.data.total
  },
  revert(data){
      var parts = data.split(';base64,'),
      contentType = parts[0].split(':')[1],
      raw = window.atob(parts[1]),
      length = raw.length,
      arr = new Uint8Array(length);
      for (var i = 0; i < length; i++) {
          arr[i] = raw.charCodeAt(i);
      }
      var blob = new Blob([arr], { type: contentType });
      return URL.createObjectURL(blob);
    },
  },
  created(){
    this.order_info()
  }
}
</script>
<style lang="scss" scoped>
.page{
  float: right;
  margin-top: 2%;
}
.btn{
  margin-bottom: 2%;
}
</style>